<template>
    <div class="myList">
        <van-collapse v-model="activeNames">

            <van-collapse-item title="未完成" name="1">
                <!-- 未完成的内容 -->
                <ul>
                    <li v-for="item,index in list" v-show="item.status == 0" :key="item.id">
                        <input type="checkbox" v-model="item.status" @click="changeItem({id:item.id,status:item.status})">
                        <p>{{item.title}}</p>
                        <van-button type="default" size="mini" @click="changeStatus({id:item.id,status:2})">取消</van-button>
                    </li>
                </ul>

            </van-collapse-item>
            <van-collapse-item title="已完成" name="2">
                <!-- 已完成内容 -->
                  <ul>
                     <li v-for="item,index in list" v-show="item.status == 1" :key="item.id">
                        <input type="checkbox" v-model="item.status" @click="changeItem({id:item.id,status:item.status})">
                        <p>{{item.title}}</p>
                        <!-- <van-button type="default" size="mini">取消</van-button> -->
                    </li>
                  </ul>
            </van-collapse-item>
            <van-collapse-item title="已取消" name="3">
                <!-- 已取消的内容 -->
                   <ul>
                        <li v-for="item,index in list" v-show="item.status == 2" :key="item.id">
                            <input type="checkbox" v-model="item.status">
                            <p>{{item.title}}</p>
                            <van-button type="default" size="mini" @click="changeStatus({id:item.id,status:0})">还原未读</van-button>
                        </li>
                   </ul>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default { 
    data() {
        return {
            activeNames:['1']
        }
    },
    methods: {
        ...mapMutations(['changeStatus','changeItem'])
    },
    computed:{
        ...mapState(['list'])

    }
}
</script>
<style lang="scss" scoped>
.myList{
    ul{
        li{
            display: flex;
            padding: 10px 20px;
            align-items: center;
            p{
                flex:1;
            }
        }
    }
}
</style>
